<template>
  <section>
    <div style="text-align: center; width: 100%; height: 100%">
      <el-row :gutter="20" style="width: 100%; height: 100%; margin: 0">
        <el-col :span="15">
          <div class="floor1 v-center">
            <div class="boxs All-center">
              <div class="blueContent" />
            </div>
            <span class="grayFont choice">待选择列表</span>
            <div class="countDiv grayFont">{{ tempArr.length+'/'+ staffList.length }}</div>
          </div>
          <el-input
            v-model="nQueryParams.keyword"
            size="mini"
            clearable
            placeholder="请输入关键字搜索"
            @change="()=>getList({search:nQueryParams.keyword})"
          />
          <hk-table
            ref="staffTable"
            :loading="loading"
            :table-data="staffList"
            :table-columns="tableList"
            :selection="true"
            :total="total"
            :select-fn="selectFn"
            :show-index="true"
            :query-params="nQueryParams"
            @handleSelectionChange="handleStaffChange"
            @changePage="getList"
          >
            <template #hostType="scope">
              <span v-if="scope.row.hostType">{{
                scope.row.hostType == 'terminal'
                  ? '终端'
                  : scope.row.hostType == 'server'
                    ? '服务器'
                    : scope.row.hostType == 'networkDevice'
                      ? '网络设备'
                      : scope.row.hostType == 'storageDevice'
                        ? '存储设备'
                        : scope.row.hostType == 'other'
                          ? '其他'
                          : ''
              }}</span>
            </template>
          </hk-table>
        </el-col>
        <el-col :span="1">
          <div class="center">
            <el-button
              type="primary"
              icon="el-icon-arrow-right"
              class="takeBtn"
              @click="addStaff"
            />
            <el-button
              type="primary"
              icon="el-icon-arrow-left"
              class="takeBtn"
              @click="removeStaff"
            />
          </div>
        </el-col>
        <el-col :span="8">
          <div class="floor1 v-center">
            <div class="boxs All-center">
              <div class="blueContent" />
            </div>
            <span class="grayFont choice">已选择列表</span>
            <div class="countDiv grayFont">{{ selectedStaffData.length +'/'+ selectedStaffList.length }}</div>
          </div>
          <!-- <el-input
            v-model="nQueryParams.keyword"
            size="mini"
            clearable
          @change="searchSelected"
          >
          </el-input> -->
          <template v-for="item in selectedStaffList">
            <el-checkbox
              v-model="item.checked"
              @change="(val) => storageRight(val, item)"
            >{{ item.ip }}</el-checkbox>
          </template>
        </el-col>
      </el-row>
    </div>
  </section>
</template>

<script>
import HkTable from '../../Hk-Table/index.vue'

export default {
  components: { HkTable },
  props: {
    tableData: {
      type: Array,
      default: () => []
    },

    // 列表显示字段
    tableList: {
      type: Array,
      default: () => []
    },
    // 查询条件
    queryParams: {
      type: Object,
      default: () => {
        return {
          size: 10,
          current: 1
        }
      }
    },

    total: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      // 左侧选中存储的数组
      tempArr: [],
      ids: [],

      // 右侧数据
      selectedStaffList: [],
      // 右侧选中的数据
      selectedStaffData: [],
      // 是否加载中
      loading: false,
      nQueryParams: this.queryParams
    }
  },
  computed: {
    //  表格左侧数据
    staffList() {
      return this.tableData
    }
  },
  mounted() {

  },
  methods: {
    // 获取搜索列表（左边表格数据）
    getList(val) {
      this.$emit('changePage', val)
    },
    selectFn(row, index) {
      const isInside = this.selectedStaffList.filter(item => item.id == row.id).length
      if (isInside) return false
      else return true
    },
    // 将左边表格选择项存入staffData中
    handleStaffChange(rows) {
      this.tempArr = []
      if (rows) {
        rows.forEach((row) => {
          if (row) {
            this.tempArr.push(row)
          }
        })
      }
    },
    searchSelected(val) {

    },
    // 左边表格选择项移到右边
    addStaff() {
      let repeat = false
      this.selectedStaffList.forEach((item) => {
        if (this.tempArr[0] && item.id === this.tempArr[0].id) {
          repeat = true
          this.$message.error('此项已添加')
          return
        }
      })
      if (repeat === false) {
        this.tempArr.forEach((item) => {
          const newItem = { ...item, checked: false }
          this.selectedStaffList.push(newItem)
        })

        // this.selectedStaffList.forEach(item => {
        //   this.selectFn(item)
        // })
      }
      this.$refs.staffTable.clearSelection()
    },
    // 右侧选中
    storageRight(data, item) {
      if (item.checked) {
        this.selectedStaffData.push(item)
      } else {
        this.selectedStaffData.forEach((i, idx) => {
          if (i.id == item.id) {
            this.selectedStaffData.splice(idx, 1)
          }
        })
      }
    },
    // 右边表格选择项移到左边
    removeStaff() {
      const ids = []
      this.selectedStaffData.forEach((item) => {
        ids.push(item.id)
      })

      this.selectedStaffList = this.selectedStaffList.filter(item => {
        return !ids.includes(item.id)
      })
      this.selectedStaffData = []
      this.selectedStaffList.forEach(item => item.checked = false)
    },
    // 将右边表格选择项存入selectedStaffData中
    handleSelectedStaffChange(rows) {
      this.selectedStaffData = []
      if (rows) {
        rows.forEach((row) => {
          if (row) {
            row.checked = false
            this.selectedStaffData.push(row)
          }
        })
      }
    },
    submitData() {
      return new Promise((resolve, reject) => {
        resolve(this.selectedStaffList)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
section {
  width: 100%;
  height: 100%;
}
.el-row {
  display: flex;
}
.el-col {
  display: flex;
  flex-direction: column;
  border: 1px solid #e8e8e8;
  &:nth-of-type(2){
    border: none;
  }
  .targetTable {
    flex: 1;
    overflow: auto;
  }
}
.v-center {
  display: flex;
  align-items: center;
}
.center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.All-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.choice {
  margin-left: 8px;
}
.grayFont {
  font-size: 14px;
  color: #95989c;
}
.countDiv {
  margin-left: auto;
  margin-right: 12px;
}
.takeBtn {
  margin: 0 0 4px 0;
  padding: 0;
  width: 24px;
  height: 24px;
  line-height: 24px;
  border-radius: 4px;
}
.floor1 {
  width: 100%;
  height: 40px;
  line-height: 40px;
  border-bottom: 1px solid #c8cbcd;
  padding-left: 12px;
  margin-bottom: 10px;
  .boxs {
    height: 16px;
    width: 16px;
    border: 1px solid #d9d9d9;
    .blueContent {
      height: 6px;
      width: 6px;
      background-color: #2979ff;
    }
  }
}
::v-deep {
  .el-dialog__body {
    max-height: 600px;
  }
  .el-checkbox{
    height: 41px;
    line-height: 41px;
    padding: 0 10px;
  text-align: left;
  }
}
</style>
